<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm actForm" style="overflow: hidden">
            <el-form-item label="活动名称" prop="actname">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="机会名称" prop="opponame">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="预计成交日期" prop="tradedate">
                <el-col :span="12">
                    <el-form-item prop="tradedate" class="actForm-select">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option
                                    v-for="item in dateoptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="tradetime">
                        <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label="营销活动来源" prop="actsource">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="销售机会标签" prop="oppotag">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="相关附件" prop="document">
                <el-upload
                        class="upload-demo actForm-document"
                        drag
                        action="https://jsonplaceholder.typicode.com/posts/"
                        multiple
                        :beforeUpload="beforeUpload">
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                </el-upload>
            </el-form-item>
            <el-form-item label="报价编号" prop="salepriceid">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "actrecForm",
        props:{},
        data() {
            return {
                dateoptions:[
                    { value: 1, label: '今年' },
                    { value: 2, label: '明年' },
                    { value: 3, label: '2021' }
                ],
                ruleForm: {
                    actname: '',
                    opponame: '',
                    tradedate: '',
                    tradetime: '',
                    actsource: '',
                    oppotag: [],
                    document: '',
                    salepriceid: ''
                },
                // rules: {
                //     name: [
                //         { required: true, message: '请输入活动名称', trigger: 'blur' },
                //         { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                //     ],
                //     region: [
                //         { required: true, message: '请选择活动区域', trigger: 'change' }
                //     ],
                //     date1: [
                //         { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                //     ],
                //     date2: [
                //         { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                //     ],
                //     type: [
                //         { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                //     ],
                //     resource: [
                //         { required: true, message: '请选择活动资源', trigger: 'change' }
                //     ],
                //     desc: [
                //         { required: true, message: '请填写活动形式', trigger: 'blur' }
                //     ]
                // }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        window.console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            beforeUpload(file) {
                //规定上传的文件
                var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
                const extension = testmsg
                const extension2 = testmsg
                if(!extension && !extension2) {
                    this.$message({
                        message: '上传文件只能是 xls、xlsx格式!',
                        type: 'warning'
                    });
                }
                //规定上传格式的大小
                const isLt2M = file.size / 1024 / 1024 < 100
                if(!isLt2M) {
                    this.$message({
                        message: '上传文件大小不能超过 100MB!',
                        type: 'warning'
                    });
                }
                return extension || extension2 && isLt2M
            }
        }
    }
</script>

<style>
    .actForm .el-form-item{width: 100%;margin-bottom: 22px !important;}
    .actForm-select .el-select input[type="text"]{padding-left: 10px;width: 300px}
    .actForm-document .el-upload-dragger{width: 669px;height: 40px;border: 1px solid #d9d9d9;}
</style>